<template>
	<view class="detailbox">
		<view class="header" :style="{height: iStatusBarHeight*2+480 + 'upx'}">
			<!-- <view class="status_bar" ></view> -->
			<view class="titleBox flex-row flex-between" :style="{top: iStatusBarHeight*2 + 30 + 'upx'}">
				<image src="../../static/icon/left_arrow.png" class="back" @click="back"></image>

				<view class="flex-row" v-if="need==true">
					<view style="margin-right: 20upx;">
						<image src="../../static/iconjub.png" class="star" @click="report"></image>
						<text class="font24 colorf">投诉</text>
					</view>
					<view>
						<image :src="detail.isCollection ? require('../../static/icon/star2.png') : require('../../static/icon/star.png')"
						 class="star" @click="collect"></image>
						<text class="font24 colorf">觅获</text>
					</view>

				</view>
			</view>
			<view class="imgBox">
				<swiper class="swiper" @change="swiperChange" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				 :duration="duration">
					<swiper-item v-if="detail.video">
						<video :src="detail.video" style="width: 100%;" controls></video>
					</swiper-item>
					<swiper-item v-for="item in imgUrl" :key="index">
						<image :src="item" class="img"></image>
					</swiper-item>
				</swiper>
				<view class="imageCount">{{current+1}}/{{imgUrl.length}}</view>
			</view>
		</view>
		<view class="titleInfo">
			<view class="title" v-if='need==false'><text v-if="detail.shelvesStatus ==1">【上架中】</text>{{detail.patentName}}</view>
			<view class="title" xv-if='need==true'><text v-if="detail.shelvesStatus ==1">【上架中】</text>{{detail.name}}</view>
			<view class="tagList flex-row flex-between">
				<view class="tags">
					<view v-for="(i,index) in getlaber" :key="index"> {{i}}</view>
				</view>
				<view class="flex-row tprice" v-if="need == true">
					<view>悬赏价格:</view>
					<view class="prs"><text>￥</text>{{detail.price}}</view>
				</view>
				<view class="flex-row tprice" v-if="need == false">
					<view>转让价格:</view>
					<view class="prs"><text>￥</text>{{detail.transferPrice}}</view>
				</view>
			</view>
			<view class="classList">
				<view v-for="n in detail.needApplyType" :key="n" v-if="n==1">成果价值评估需求</view>
				<view v-for="n in detail.needApplyType" :key="n" v-if="n==2">寻求销售渠道合作</view>
				<view v-for="n in detail.needApplyType" :key="n" v-if="n==3">寻求转化生产合作</view>
				<view v-for="n in detail.needApplyType" :key="n" v-if="n==4">寻求法律维权服务</view>

			</view>
		</view>
		<view class="itemList">
			<view class="flex-row item">
				<view class="label">专利号:</view>
				<view class="content">{{detail.patentNumber}}</view>
			</view>
			<view class="flex-row item">
				<view class="label">领 域:</view>
				<view class="content">{{detail.fieldName}}</view>
			</view>
			<view class="flex-row item">
				<view class="label">在 线:</view>
				<view class="content">{{detail.isOffline==true?'是':' 否'}}</view>
			</view>
			<view class="flex-row item">
				<view class="label">交易时间:</view>
				<view class="content">{{periodTimes}}</view>
			</view>
		</view>
		<view class="descBox">
			<view class="tls flex-row">
				<image src='../../static/icon/hzzx@2x.png'></image>
				<view v-if="need == false">专利介绍</view>
				<view v-if="need == true">悬赏介绍</view>
			</view>
			<view class="desc" v-if="need == false">{{detail.introduction}}</view>
			<view class="desc" v-if="need==true">{{detail.introduce}}</view>
			<!-- 当专利被删除的时候 -->
			<!-- <view class="descs">
				<image src="../../static/icon/zlNodata.png"></image>
				<view style="text-align: center;margin-top: 40upx;">该专利好像被主人删除掉拉~ </view>
			</view> -->
		</view>
		<!-- 专利详情 -->
		<view class="footer flex-row flex-between" v-if="!mine">
			<view class="flex-row leftAvatar">
				<image :src='detail.userHead' mode="widthFix" @click="gomain(detail.userId)"></image>
				<view class="flex-col">
					<view class="school">{{detail.userTypeName}}</view>
					<view class="name">{{detail.userName}}</view>
				</view>
			</view>
			<view class="flex-row btns">
				<view class="status" @click="goChat">联系卖家</view>
				<view class="status2" v-if="need == false" @click="buyNow">立即购买</view>
				<!-- <view class="status2" @click="buyNow">被下单</view> -->
				<!-- <view class="status2" @click="buyNow">已下单</view> -->
			</view>
		</view>
		<!-- 成果需求申请中 -->
		<view class="cgxqsq" v-if="mine">
			<!-- <view class="toper">您正在申请<text>“专利合作需求”</text>,请耐心等待平台工作人员审核</view> -->
			<view class="foot_sj flex-row flex-between">
				<view class="leftBtn" @click="openApply">需求申请</view>
				<view class="rightBtn" @click="openUp">置顶成果</view>
			</view>
		</view>

		<!-- 立即购买弹窗 -->
		<uni-popup ref="uniPop" type="share">
			<buy-dialog ref="buy" :type="msgType" :userId="id" :patentId='patentId' :title="title" :before-close="true" @confirm="dialogConfirmBuy"
			 @close="dialogClose"></buy-dialog>
		</uni-popup>
		<!-- 在线联系弹窗 -->
		<uni-popup ref="uniPops" type="share">
			<call-online :type="msgType" :title="title" :patentId='patentId' :info="detail" :num="info.number" :before-close="true"
			 @confirm="dialogConfirms" @close="dialogCloses"></call-online>
		</uni-popup>
		<!-- 需求申请弹窗 -->
		<uni-popup ref="uniPopa" type="share">
			<uni-popup-apply :before-close="true" :patentId='patentId' :info="detail" @confirm="dialogConfirms" @close="dialogCloses"></uni-popup-apply>
		</uni-popup>

		<!-- 置顶 -->
		<uni-popup ref="uniPopup" type="share">
			<uni-popup-up :before-close="true" @gopay='gopay' :patentId='patentId' :info="detail" @confirm="dialogConfirms"
			 @close="dialogCloses"></uni-popup-up>
		</uni-popup>

		<!-- 支付弹窗 -->
		<uni-popup ref="uniPayPop" type="share">
			<uni-popup-payfor ref="pay" :before-close="true" @payTypes="payTypes" :orderId="orderId" :money="money" @confirm="dialogConfirm"
			 @close="dialogClose"></uni-popup-payfor>
		</uni-popup>
		<ssPaymentPassword ref="paymentPassword" mode="1" @submit="submitHandle" />
	</view>
</template>

<script>
	import md5 from '../../api/md5.js'
	import ssPaymentPassword from '../../components/sanshui-payment-password'
	export default {
		components: {
			ssPaymentPassword
		},
		data() {
			return {
				need: false,
				patentId: '',
				detail: {
					keywords: ''
				},
				type: 'bottom',
				msgType: 'info',
				title: "",
				isCollect: false,
				indicatorDots: false,
				autoplay: true,
				interval: 4000,
				duration: 500,
				current: 0,
				imgUrl: [{
						id: 1,
						src: require('../../static/icon/bijiben.jpg')
					},
					{
						id: 2,
						src: require('../../static/icon/bijiben.jpg')
					},
					{
						id: 3,
						src: require('../../static/icon/bijiben.jpg')
					}
				],
				iStatusBarHeight: '',
				info: {},
				number: {},
				mine: false,
				orderId: '',
				money: '',

				payFlag: true,
				paymentPwd: '',
				periodTimes: '',
				topType: '',
				payType: '',
				isup: false,
				msgdata:''
			};
		},
		computed: {
			getlaber: function() {
				return this.detail.keywords.split(',')
			},
		},
		mounted() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onLoad(option) {
			this.patentId = option.id
			if (option.need) {
				this.need = true
				this.getneed()
			} else {

				this.need = false
				this.getdetail()
			}
			this.getInfo()
		},
		methods: {
			id() {

			},
			getInfo() {
				let id = uni.getStorageSync('userId')
				this.$http.get('/userCenter/getUserInfoById', {
					id: id
				}).then(res => {
					if (res.code == '0') {
						this.periodTimes = res.data.periodTimes

					}
				})
			},
			gomain(id) {
				uni.navigateTo({
					url: '/pages/profess/detail?id=' + id
				})
			},
			index() {

			},
			getbanner() {
				this.$http.get('/public/getBanner').then(res => {
					if (res.code == '0') {
						let arr = []
						res.data.forEach(item => {
							arr = arr.concat(item.coveImg)
						})
						this.imgUrl = arr
					}
				})
			},
			//获取详情
			getdetail() {
				this.$http.get('/patent/getPatentById', {
					patentId: this.patentId
				}).then(res => {
					if (res.code == 0) {
						this.detail = res.data
						this.id = res.data.userId
						if (res.data.picture) {
							this.imgUrl = res.data.picture.split(",")
						} else {
							this.getbanner()
						}
						if (this.$SysCache.get('userId') == res.data.userId) {
							this.mine = true
						}
						this.$http.get('/patent/lookUserFreeNumber', {
							userId: res.data.userId
						}).then(res => {
							if (res.code == 0) {
								this.info = res.data
							}
						})
					}
				})

			},

			//悬赏详情
			getneed() {
				this.$http.get('/demand/getDemandInfoById', {
					demandId: this.patentId
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data)
						this.detail = res.data;
						this.msgdata =  res.data
						console.log(this.detail)
						this.id = res.data.userId
						if (res.data.picture) {
							this.imgUrl = res.data.picture.split(",")
						} else {
							this.getbanner()
						}
						this.mine = false
						this.$http.get('/patent/lookUserFreeNumber', {
							userId: res.data.userId
						}).then(res => {
							if (res.code == 0) {
								this.info = res.data
								this.msgdata =  res.data
							}
						})
					}
				})

			},

			getNumber() {
				this.$http.get('/patent/deductNumber', {
					userId: this.id
				}).then(res => {
					if (res.code == 0) {
						// this.number = res.data
					}
				})
			},
			//获取交易类型列表
			gettype() {
				this.$http.get('/patent/getTradeTypeList', {
					patentId: this.patentId
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data)
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			//投诉

			report() {
				uni.navigateTo({
					url: './complaints?id=' + this.detail.id + '&name=' + this.detail.name
				})

			},

			//收藏
			collect() {

				let data = {
					patentId: this.patentId,
					// userId:this.id,
					type: this.detail.isCollection ? '2' : '1'
				}
				this.$http.get('/patent/collectPatent', data).then(res => {

					if (res.code == 0) {
						this.detail.isCollection = !this.detail.isCollection;
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})


			},
			//购买置顶
			payup() {
				let data = {
					type: 2, //购买类型1=专利，2=需求悬赏
					demandId: this.patentId,
					patentId: this.patentId,
					money: this.money,
					topType: this.topType,
					payType: this.payType
				}
				this.$http.get('/orderTop/getOrderTopInfo', data).then(res => {
					if (res.code == 0) {
						if (this.payType == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: JSON.stringify(res.data.orderInfo),
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {

								}
							});
						} else if (this.payType == 2) {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.data.orderInfo,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									this.getOrderList()
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));

								}
							});
						}

					}
				})
			},
			swiperChange(e) {

				this.current = e.detail.current;

			},
			//立即购买
			gopay(money) {
				console.log(money)
				this.money = money.money
				this.topType = money.topType
				this.$refs.uniPayPop.open()
			},

			buyNow() {
				// uni.navigateTo({
				// 	url:'text'
				// })
				this.$refs.uniPop.open()
			},
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				console.log(done)

				// 需要执行 done 才能关闭对话框
				done()
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				// 需要执行 done 才能关闭对话框
				done()
			},
			//点击在线沟通
			goChat() {
				this.$refs.uniPops.open()
				this.getNumber()
				// uni.navigateTo({
				// 	url:'../message/chat'
				// })
			},
			dialogConfirms(done) {
				console.log('点击确认');
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogConfirmBuy(data, money) {
				console.log('点击确认');
				this.$refs.uniPop.close()
				this.orderId = data.orderId
				this.money = money
				this.$refs.uniPayPop.open()

			},

			dialogCloses(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				// 需要执行 done 才能关闭对话框
				done()
			},
			openApply() {
				this.$refs.uniPopa.open()
			},
			openUp() {
				this.$refs.uniPopup.open()
			},
			getItem(item) {
				this.$refs.buy.getItem(item)
			},

			togglePayment() {
				// this.payFlag = false
			},
			//获取置顶支付类型
			payTypes(id) {
				console.log(id)
				this.payType = id
				if (id == 3) {
					this.isup = true
					console.log(id)
					this.$refs.paymentPassword.modalFun('show');

				} else {
					this.payup()
				}

			},
			payType(id) {
				console.log(id)
				this.payType = id
				if (id == 3) {
					this.$refs.paymentPassword.modalFun('show');

				} else {
					this.toPay(id)
				}

			},
			toPay(type) {
				console.log(type)
				let data = {
					orderId: this.orderId,
					// userId:this.id,
					payType: type
				}
				this.$http.get('/orderPatent/payOrderInfo', data).then(res => {
					if (res.code == 0) {
						console.log(res.data)
						uni.requestPayment({
							provider: type == 1 ? 'wxpay' : 'alipay',
							orderInfo: res.data.orderInfo, //微信、支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.$refs.pay.setPay('false')
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			
			submitHandle(e) {
				console.log(e)
				if (this.isup == true) {
					if (e.type == 'check') {
						let data = {
							type:2,//购买类型1=专利，2=需求悬赏
							demandId:this.patentId,
							// patentId:this.patentId,
							money:this.money,
							topType:this.topType,
							payType:this.payType,
							password: md5(e.value) 
						}
						this.$http.get('/orderTop/balancePayOrder', data).then(res => {

							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.$refs.pay.setPay('false')
							} else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					}
				} else {
					if (e.type == 'check') {
						let data = {
							orderId: this.orderId,
							// userId:this.id,
							password: e.value
						}
						this.$http.get('/orderPatent/balancePayOrder', data).then(res => {

							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.$refs.pay.setPay('false')
							} else if (res.code == 2) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					}
				}

			}
		}
	};
</script>

<style scoped lang="scss">
	.detailbox {
		padding-bottom: 180upx;

		.cgxqsq {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			overflow: hidden;

			.toper {
				padding: 22upx 30upx;
				background: rgba(0, 0, 0, 0.6);
				font-size: 26upx;
				color: #fff;

				>text {
					color: #39D214;
				}
			}

			.foot_sj {
				border-top: 1upx solid #eeeeee;
				width: 750upx;
				font-size: 30upx;
				text-align: center;

				.leftBtn {
					color: #FE590B;
					background: #fff;
					width: 50%;
					padding: 35upx 0;
				}

				.rightBtn {
					width: 50%;
					color: #fff;
					background: #FE590B;
					padding: 35upx 0;
				}
			}
		}

		.footer {
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			padding: 13upx 30upx;
			border-top: 1upx solid #eeeeee;
			width: 690upx;

			.leftAvatar {
				align-items: center;

				image {
					width: 72upx;
					height: 72upx;
					border-radius: 50%;
					// border: 1up solid #eeeeee;
					margin-right: 10upx;
					vertical-align: middle;
				}

				.school {
					font-size: 22upx;
					color: #9A9AA2;
					padding-bottom: 16upx;
				}

				.name {
					font-size: 26upx;
					color: #34343C;
				}
			}

			.btns {
				>view {
					font-size: 26upx;
					width: 150upx;
					height: 65upx;
					line-height: 65upx;
					text-align: center;
					margin-left: 14upx;
					border: 1upx solid #FD580A;
					border-radius: 50upx;
					font-weight: bold;

					&.status {
						color: #FD580A;
						background: #fff;
					}

					&.status2 {
						background: #FD580A;
						color: #fff;
					}
				}
			}
		}

		.descBox {
			padding: 30upx;
			background: #fff;

			.tls {
				font-size: 36upx;
				color: #22222A;
				align-items: center;
				margin-bottom: 30upx;

				image {
					width: 34upx;
					height: 36upx;
					margin-right: 16upx;
				}
			}

			.desc {
				font-size: 30upx;
				color: #666666;

			}

			.descs {
				text-align: center;
				color: #9A9A9A;
				font-size: 24upx;
				padding: 130upx 0;

				>image {
					width: 160upx;
					height: 144upx;
					margin: 0 auto;
				}
			}
		}

		.itemList {
			background: #fff;
			padding: 0 30upx;
			margin-bottom: 20upx;

			.item {
				padding: 30upx 0;
				border-bottom: 1upx solid #eeeeee;
				font-size: 30upx;
				color: #22222A;

				&:last-child {
					border-bottom: none;
				}

				.label {
					width: 140upx;
				}

				.content {
					padding-left: 30upx;
				}
			}
		}

		.titleInfo {
			background: #fff;
			padding: 30upx;
			margin-bottom: 20upx;

			.title {
				font-size: 34upx;
				color: #22222A;
				font-weight: bold;

				>text {
					color: #4CD964;
				}
			}

			.tagList {
				padding-top: 23upx;
				padding-bottom: 23upx;

				.tags {
					width: 400upx;

					>view {
						display: inline-flex;
						font-size: 22upx;
						color: #fd580a;
						border: 1upx solid #fd580a;
						padding: 5upx 10upx;
						margin-right: 16upx;
						border-radius: 8upx;
						margin-bottom: 10upx;
					}
				}

				.tprice {
					font-size: 30upx;
					color: #22222A;
					align-items: center;

					.prs {
						font-size: 36upx;
						color: #fd580a;
						font-weight: bold;

						>text {
							font-size: 28upx;
						}
					}
				}
			}

			.classList {
				color: #38d214;
				font-size: 26upx;

				>view {
					display: inline-flex;
					background: url(../../static/icon/green.png) no-repeat left 13upx;
					background-size: 8upx 8upx;
					padding-left: 20upx;
					margin-right: 37upx;
					padding-bottom: 20upx;

					&:first-child {
						margin-left: 0;
					}
				}
			}
		}

		.header {
			position: relative;
			height: 480upx;

			.titleBox {
				position: absolute;
				z-index: 99;
				width: 690upx;
				padding: 0 30upx;

				.back {
					width: 20upx;
					height: 40upx;
				}

				.star {
					width: 40upx;
					height: 40upx;
					vertical-align: middle;
				}
			}

			.imgBox {
				width: 100%;
				height: 100%;

				.swiper {
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.imageCount {
					width: 80upx;
					height: 40upx;
					background-color: rgba(0, 0, 0, 0.3);
					border-radius: 40upx;
					line-height: 40upx;
					color: #fff;
					text-align: center;
					font-size: 24upx;
					position: absolute;
					right: 13upx;
					bottom: 20upx;
				}
			}
		}
	}
</style>
